<template>
  <div id="div-1" class="bg-gray-100">
    <a-flex justify="center" id="a-flex-1">
      <a-select :value="selectVal1" :bordered="false" id="sel-1">
        <a-select-option id="aso-1" value="selectVal1">按版本查找课本</a-select-option>
      </a-select>
      <a-select :value="selectVal2" :bordered="false" id="sel-2">
        <a-select-option id="aso-2" value="selectVal2">按学科查课本</a-select-option>
      </a-select>
      <a-select :value="selectVal3" :bordered="false" id="sel-3">
        <a-select-option id="aso-3" value="selectVal3">按年级查课本</a-select-option>
      </a-select>
      <a-select :value="selectVal4" :bordered="false" id="sel-4">
        <a-select-option id="aso-4" value="selectVal4">按阶段查课本</a-select-option>
      </a-select>
      <a-select :value="selectVal5" :bordered="false" id="sel-5">
        <a-select-option id="aso-5" value="selectVal5">按学科+年级查课本</a-select-option>
      </a-select>
      <a-select :value="selectVal6" :bordered="false" id="sel-6">
        <a-select-option id="aso-6" value="selectVal6">按城市查课本</a-select-option>
      </a-select>
      <a-select :value="selectVal7" :bordered="false" id="sel-7">
        <a-select-option id="aso-7" value="selectVal7">按学科查视频</a-select-option>
      </a-select>
      <a-select :value="selectVal8" :bordered="false" id="sel-8">
        <a-select-option id="aso-8" value="selectVal8">按学科查答案</a-select-option>
      </a-select>
      <a-select :value="selectVal9" :bordered="false" id="sel-9">
        <a-select-option id="aso-9" value="selectVal9">按年级查作文</a-select-option>
      </a-select>
    </a-flex>
    <div class="w-4/5 mx-auto" id="content">
      <a-flex id="a-flex-2" gap="10">
        <a-flex id="a-flex-2-flex1" :vertical="true" flex="1" class="border-solid border-blue-200 border-2">
          <a-typography-paragraph class="!m-0 text-center" id="a-flex2-fle1-atp1">
            <a-typography-title href="#" :level="5" class="p-2 bg-blue-200 !text-blue-700 text-left" id="a-flex-2-flex1-att">小学课本</a-typography-title>
            <a-typography-paragraph id="a-flex1-f" class="grid grid-cols-3 gap-4 px-4">
              <a-typography-link class="!text-black" :key="index" v-for="(item, index) in list1" :id="`flex1-att${index}`">{{ item }}</a-typography-link>
            </a-typography-paragraph>
          </a-typography-paragraph>
          <a-typography-paragraph class="!m-0 text-center" id="a-flex2-fle1-atp2">
            <a-typography-title :level="5" class="p-2 bg-blue-200 !text-blue-700 text-left" id="a-flex-2-flex2-att">中学课本</a-typography-title>
            <a-typography-paragraph id="a-flex2-f" class="grid grid-cols-3 gap-4 px-4">
              <a-typography-link href="#" class="!text-black" :key="index" v-for="(item, index) in list2" :id="`flex2-att${index}`">{{ item }}</a-typography-link>
            </a-typography-paragraph>
          </a-typography-paragraph>
          <a-typography-paragraph id="a-flex2-fle1-atp3">
            <a-typography-title :level="5" class="p-2 bg-blue-200 !text-blue-700" id="a-flex-2-flex3-att">网站地图</a-typography-title>
          </a-typography-paragraph>
        </a-flex>
        <a-flex id="a-flex-2-flex2" flex="2">
          <a-image :src='image' height="100%" width="100%" :preview="false" id="image"></a-image>
        </a-flex>
        <a-flex id="a-flex-2-flex3" flex="1" :vertical="true">
          <a-typography-title :level="5" class="!text-blue-700 px-4" id="flex3-att1">
            <MenuUnfoldOutlined id="flex3-icon"/>
            电子<a-divider type="vertical" id="flex3-divider"></a-divider>教材
          </a-typography-title>
          <a-typography-paragraph id="a-flex3-f" class="grid grid-cols-2 px-4 text-center gap-2">
            <a-typography-link href="#" class="bg-white !m-0 p-2" :key="index" v-for="(item, index) in versionList" :id="`flex-3-atp${index}`">
              <a-avatar :src="`https://picsum.photos/id/${index}/68/68`" :id="`avatar${index}`"/>
              <a-typography-paragraph class="!my-2" :id="`avatar-atp${index}`">{{ item }}</a-typography-paragraph>
            </a-typography-link>
          </a-typography-paragraph>
        </a-flex>
      </a-flex>
      <a-flex :vertical="true" class="mt-4" id="content">
        <a-flex justify="space-between" class="px-2" id="content-title-box">
          <a-typography-title :level="5" id="content-title">语文电子课本</a-typography-title>
          <a-typography-link id="content-title-more">
            更多
            <DoubleRightOutlined id="content-title-icon" />
          </a-typography-link>
        </a-flex>
        <a-flex id="content-box">
          <a-flex :vertical="true" class="min-w-40 text-center" id="content-left">
            <a-typography-link :id="`content-left${index}`" class="!text-gray-400 mt-2" href="#" v-for="(item, index) in list3" :key="index">{{ item }}</a-typography-link>
          </a-flex>
          <a-typography-paragraph id="content-right" class="flex grid grid-cols-6 gap-2 text-center">
            <a-typography-link v-for="(item, index) in list4" :key="index" :id="`list4-${index}`">
              <a-image :id="`list4img${index}`" :preview="false" :src="`https://picsum.photos/id/${(index + 10)}/200/250`"></a-image>
              <a-typography-paragraph :id="`list4atp${index}`" class="mt-2"><a-typography-text :id="`list4att${index}`">{{ item }}</a-typography-text></a-typography-paragraph>
            </a-typography-link>
          </a-typography-paragraph>
        </a-flex>
      </a-flex>
    </div>
  </div>
</template>

<script setup>
const selectVal1 = ref('selectVal1');
const selectVal2 = ref('selectVal2');
const selectVal3 = ref('selectVal3');
const selectVal4 = ref('selectVal4');
const selectVal5 = ref('selectVal5');
const selectVal6 = ref('selectVal6');
const selectVal7 = ref('selectVal7');
const selectVal8 = ref('selectVal8');
const selectVal9 = ref('selectVal9');
const list1 = ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']
const list2 = ['七年级', '八年级', '九年级', '高一', '高二', '高三']
const image = "https://picsum.photos/id/7/1080/300";
const versionList = ['人教版', '苏教版', '北师大版', '粤教版', '语文版', '西师大版']
const list3 = ['人教版','部编版','苏教版','北师大版','沪教版','鲁教版','湘教版','鄂教版','语文版','河大版','西师大版','鲁人版','冀教版','粤教版']
const list4 = ['部编版一年级语文上册','部编版一年级语文下册','部编版二年级语文上册','部编版二年级语文下册','部编版三年级语文上册','部编版三年级语文下册','部编版四年级语文上册','部编版四年级语文下册','部编版五年级语文上册','部编版五年级语文下册','部编版六年级语文上册','部编版六年级语文下册']
</script>
<style></style>
